import React, { useEffect } from 'react'
import './Hero.css';
import axios from 'axios'
import { useState } from 'react';

export default function Hero() {
  //声明状态
  let [heros, setHeros] = useState([]);
  let [keyword, setKeyword] = useState('');

  useEffect(() => {
    let getHeros = async () => {
      let result = await axios.get('http://api.xiaohigh.com/heros');
      setHeros(result.data);
    }
    getHeros();
  }, [])

  let change = (e) => {
    //更新状态
    setKeyword(e.target.value);
  }

  let search = async () => {
    let result = await axios.get('http://api.xiaohigh.com/heros', {
      //设置查询字符串参数的
      params: {
        name_like: keyword
      }
    });
    //更新状态
    setHeros(result.data);
  }

  return (
    <div className="hero-container">
      <h2>英雄列表</h2>
      <hr />
      <div className="form">
        <input type="text" value={keyword} onChange={change} /><button onClick={search}>搜索</button>
      </div>
      <hr />
      <div className="hero-list">
        {
          heros.map(item => {
            return <div key={item.id} className="hero-item">
                    <img src={"https://cdn.xiaohigh.com" + item.image} alt="" />
                    <p>{item.name}</p>
                  </div>
          })
        }
      </div>

    </div>
  )
}
